import React, {useRef} from "react";

import { CEType } from "@/components/app/earth3dVis";
import { CaseComponent } from "./type";
import { MenuGroup, MenuGroupProps } from "./components";

import { EnumStatic } from "./constants";
import cameraImgUrl from "./img/icon/camera.png";

function generatePosition(CE: CEType, num: number) {
    const list = [];
    for (let i = 0; i < num; i++) {
        const lng = 120.38105869 + Math.random() * 0.5
        const lat = 31.10115627 + Math.random() * 0.5
        list.push(new CE.Position(lng, lat))
    }
    return list
}

const menus: MenuGroupProps["menus"] = [
    {
        label: "数据图层",
        value: "dataLayer",
        children:[
            {label: "矢量图层", value: "vectorLayer", imageUrl: EnumStatic.menus.dataLayer.vector},
            {label: "聚合(默认样式1)", value: "polymerization1", imageUrl: EnumStatic.menus.dataLayer.cluster_circle},
            {label: "聚合(默认样式2)", value: "polymerization2", imageUrl: EnumStatic.menus.dataLayer.cluster_clustering},
            {label: "3DTiles", value: "3dtiles", imageUrl: require("./img/baseLayer/google.png").default},
            {label: "geojson", value: "geojson", imageUrl: require("./img/baseLayer/google.png").default},
        ]
    }
];

export const DataLayer: CaseComponent = ({cesiumUtil}) => {
    const { CE, viewer } = cesiumUtil;
    const disposeRef = useRef<Function>();

    return <MenuGroup
        menus={menus}
        onMenuClick={(value) => {
            if(disposeRef.current) {
                disposeRef.current();
                disposeRef.current = null;
            }
            switch (value) {
                // 矢量图层
                case "vectorLayer": {
                    let layer = new CE.VectorLayer('layer')
                    const positions = generatePosition(CE, 20);
                    positions.forEach(item => {
                        const billboard = new CE.Billboard(item, EnumStatic.icon.camera)
                        layer.addOverlay(billboard)
                    });
                    viewer.addLayer(layer);
                    viewer.flyTo(layer);

                    disposeRef.current = () => viewer.removeLayer(layer);
                    break;
                }

                // 聚合(默认样式1)
                case "polymerization1": {
                    const layer = new CE.ClusterLayer('layer');
                    const positions = generatePosition(CE, 10000);
                    positions.forEach(item => {
                        const billboard = new CE.Billboard(item, EnumStatic.icon.camera)
                        layer.addOverlay(billboard)
                    })
                    viewer.addLayer(layer)
                    viewer.flyTo(layer);

                    disposeRef.current = () => viewer.removeLayer(layer);
                    break;
                }

                // 聚合(默认样式2)
                case "polymerization2": {
                    const layer = new CE.ClusterLayer('layer',{style:'clustering'})
                    viewer.addLayer(layer)
                    const positions = generatePosition(CE, 10000);
                    positions.forEach(item => {
                        const billboard = new CE.Billboard(item, EnumStatic.icon.camera)
                        layer.addOverlay(billboard)
                    })
                    viewer.flyTo(layer);

                    disposeRef.current = () => viewer.removeLayer(layer);
                    break;
                }

                // 3dTiles
                case "3dtiles": {
                    const layer = new CE.TilesetLayer('layer')
                    viewer.addLayer(layer)
                    const tileset = new CE.Tileset(
                        '//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
                    )
                    tileset.setHeight(-420)
                    layer.addOverlay(tileset)
                    viewer.flyTo(tileset)

                    disposeRef.current = () => viewer.removeLayer(layer);
                    break;
                }

                // geojson
                case "geojson": {
                    const layer = new CE.GeoJsonLayer(
                        'layer',
                        EnumStatic.data.simplestylesGeojson,
                    )
                    viewer.addLayer(layer)
                    viewer.flyTo(layer)

                    disposeRef.current = () => viewer.removeLayer(layer);
                    break;
                }

                default:
                    console.error("未匹配到菜单类型")
            }
        }}
    />
}


